<template>
  <div>
    <Header></Header>
    <v-scroll :on-refresh="onRefresh" :enable-infinite="false">
      <ul >
       <li ><!--v-for="(item,index) in listdata"-->
          <Local number='22' name="本地音乐" icon="icon-music"></Local>
          <Local number=32 name="最近播放" icon="icon-zuijinplay"></Local>
          <Local number=69 name="下载管理" icon="icon-download"></Local>
          <Local number=0  name="我的电台" icon="icon-diantai"></Local>
          <Local number=1  name="我的收藏" icon="icon-collect"></Local>
         <type-list v-for="(item,index) in items" :item="item" :key="index" :index="index" ></type-list>
        </li>
      </ul>
    </v-scroll>
  </div>
</template>
<script type="text/ecmascript-6">
  import Scroll from '@/components/refresh/Refresh';
  import Header from '@/components/header/Header';
  import Local from '@/components/subassembly/Local'; // 带icon的列表
  import typeList from '@/components/subassembly/typeList'; // 带icon的列表

  import axios from 'axios';
  axios.defaults.withCredentials = true;
  export default {
    data() {
      return {
        counter: 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
        num: 15,  // 一次显示多少条
        pageStart: 0, // 开始页数
        pageEnd: 0, // 结束页数
        listData: {
          myCreate  : [],
          myCollect : []
        },
        time    : 0,
      }
    },
    computed:{
      items(){
        return this.listData;
      }
    },
    mounted: function () {
      this.getList();
    },
    methods: {
      getList() {

        const theVue = this;
        if( !theVue.time || (theVue.time + 120 *1000) < new  Date().getTime()){
          // console.log(this.base.conf.http.url);return;
          axios.get(this.base.conf.http.url + '/user/playlist?uid='+ this.$store.state.userInfo.userInfo.account.id,{type:'jsonp'}
          ).then((response) => {
            if(response.data.code === 200){
              for (let i = 0; i < response.data.playlist.length; i++)
              {
                let userId = response.data.playlist[i].creator.userId;
                if (userId === this.$store.state.userInfo.userInfo.account.id){
                  theVue.listData.myCreate.push(response.data.playlist[i])    // = [response.data.playlist[i]]
                }else{
                  theVue.listData.myCollect.push(response.data.playlist[i])
                }
              }
              theVue.$store.dispatch('set_PlayList', theVue.listData);

              // console.log(theVue.$store.state.playList)
              theVue.time = new  Date().getTime();
            }else{
              alter('请求错误 err-code:301');
            }
          }).catch((error) => {
              console.log(error);
            });
        }else{ //取缓存
          this.listData = this.$store.state.playList.playList;
          console.log('取缓存');
        }
      },
      onRefresh(done) {
        this.getList();
        done() // call done
      }
    },
    components: {
      'Header'  : Header,
      'v-scroll': Scroll,
      'Local'   : Local,
      'typeList':typeList,
    }
  }
</script>
<style scoped>
li {
padding-top: 100px;
}


</style>
